<template>
  <div id="home">
  <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>

  <scroll>
  <home-swiper :banners='banners'/>
  <home-recommend :recommend="recommends" />
  <home-feature/>
  <tab-control :title="['流行','新款','精选']" @tabClick="tabClick"/>
  <goods-list :good="showGoods"/>
  </scroll>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar'
import TabControl from '../../components/content/tabControl/TabControl.vue'


import HomeSwiper from './childComps/HomeSwiper'
import HomeRecommend from './childComps/HomeRecommend'
import HomeFeature from './childComps/HomeFeature.vue'
import GoodsList from '../../components/content/goods/GoodsList.vue'


import {getHomeMultidata,getHomeGoods} from '../../network/home'
import Scroll from '../../components/common/scroll/Scroll.vue'




export default {
  name: 'Home',
  components: {
    NavBar,
    HomeSwiper,
    HomeRecommend,
    HomeFeature,
    TabControl,
    GoodsList,
    Scroll,
  
    

  },
  data(){
    return{
        banners: [],
        recommends: [],
        goods: {
          'pop': {page: 0, list:[]},
          'new': {page: 0, list:[]},
          'sell': {page: 0, list:[]}
        },
        currentType: 'pop'
    }
  },
  computed: {
    showGoods(){
      return this.goods[this.currentType].list;
    }
  },
  created(){
    this.getHomeMultidata()
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
  
   
  },
  methods: {
    /**
     * 事件监听
     * 
     */
    tabClick(index){
      switch(index){
          case 0:
              this.currentType = 'pop'
              break;
          case 1:
              this.currentType = 'new'
              break;
          case 2:
              this.currentType = 'sell'
              break;
      }
    },


    /**
     * 网络请求有关的方法
     */

    getHomeMultidata(){
      getHomeMultidata().then(res=>{
      //console.log(res)
      this.banners = res.data.banner.list
      this.recommends = res.data.recommend.list
    })
    },
    getHomeGoods(type){
       //2.请求商品数据
       const page = this.goods[type].page+1
    getHomeGoods(type,page).then(res=>{
      console.log(res.data)
      //新方法,将数组一个个加入list中,相当于copy
      this.goods[type].list.push(...res.data.list)
      //页码加1
      this.goods[type].page += 1;
    })
    }

     
  }
}
</script>

<style scoped>
  .home-nav {
    color: white;
    background-color: var(--color-tint);
  }
 
</style>
